/* 消除边距 */

* {
    margin: 0;
    padding: 0;
  }
img {
    display: block;
} 

.out {
    // width: 1100px;
    margin: 0 auto;
    // border: 1px solid red;
    overflow: hidden;
// ::after{
//     content: "";
//     display: block;
//     clear: both;
// }

    .box{
        // width: 260px;
        height: 300px;
        background: #ccc;
        float: left;
        margin: 0 20px 20px 0 ;
        
    }
    .box:nth-child(4n){
        margin-right: 0;
    }
     
}

@media  (max-width:768px){
   .out{
       width: auto;
       .box{
           width: 320px;
           float: none;
           
           margin-left: auto ;
           margin-right: auto;
       }
       .box:nth-child(4n){
           margin-right: auto;
       }
   } 
}

@media (min-width:768px){
    .out{
        width: 680px;
        .box{
            width: 320px;
            margin-right: 40px;
        }
        .box:nth-child(2n){
            margin-right: 0;
        }
    }

}

@media (min-width:992px){
    .out{
        width: 960px;
        .box{
            width: 290px;
            margin-right: 45px;
        }
        .box:nth-child(2n){margin-right: 45px;}
        .box:nth-child(3n){margin-right: 0;}

    }
}

@media (min-width:1200px){
    .out{
        width: 1100px;
        .box{
            width: 260px;
            margin-right: 20px;
        }
        .box:nth-child(2n){
            margin-right: 20px;
        }
        .box:nth-child(3n){
            margin-right: 20px
        }
        .box:nth-child(4n){
            margin-right: 0px;
        }
    }
}

@media (min-width:1400px){
    .out{
        width: 1300px;
        .box{
            width: 300px;
            margin-right: 33.3333px;
        }
        .box:nth-child(2n){
            margin-right: 33.3333px;
        }
        .box:nth-child(3n){
            margin-right: 33.3333px
        }
        .box:nth-child(4n){
            margin-right: 0px;
        }
    }
}
